import Content from './content';
import CustomLayout from '@/components/commonComponent/customLayout/customLayout';
import { useRequest } from 'ahooks';
import { getSnCamTree } from '@/api/sr-stms';
import { Menu, Spin } from 'antd';
import { useState } from 'react';

const { CustomContent, CustomSider } = CustomLayout;

const DataGraph = () => {
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  const { data: snCamTree, loading } = useRequest(getSnCamTree, {
    formatResult: (res) => res.data,
    onSuccess: (data) => {
      if (data) {
        setSelectedKeys([data[0].children[0].cam_no]);
        setOpenKeys([data[0].name]);
      }
    },
  });

  return (
    <div className="router-view">
      <CustomLayout customMode>
        <CustomSider>
          <Spin spinning={loading}>
            <Menu
              mode="inline"
              selectedKeys={selectedKeys}
              onSelect={({ selectedKeys }) => {
                setSelectedKeys(selectedKeys);
              }}
              onOpenChange={(keys) => {
                setOpenKeys(keys);
              }}
              openKeys={openKeys}
              style={{ minHeight: 300 }}
            >
              {snCamTree?.map((item: any) => {
                return (
                  <Menu.SubMenu key={item.name} title={item.name}>
                    {item.children?.map((c: any) => {
                      return <Menu.Item key={c.cam_no}>{c.cam_no}</Menu.Item>;
                    })}
                  </Menu.SubMenu>
                );
              })}
            </Menu>
          </Spin>
        </CustomSider>
        <CustomContent>
          <Content cam_no={selectedKeys[0]}></Content>
        </CustomContent>
      </CustomLayout>
    </div>
  );
};

export default DataGraph;
